<template>
    <view class="grid">
        <view v-for="(item, index) in lists" class="grid-item active" :style="getStyle()" :key="'grid-item' + index"
            @click="gridOnclick(item)">
            <view class="grid-item_content">
                <view class="avatar-small">
                    <uv-icon v-if="item.type=='icon'" :name="item?.icon" :color="item?.color||app.globalData.primaryColor" :size="item?.size||30"></uv-icon>
                    <image v-else class="wh-full" :src="item.icon" lazy-load observeLazyLoad></image>
                </view>
                <view class="grid-item_text">{{ item.text }}</view>
            </view>
        </view>
    </view>
</template>
  
<script setup>
const app=getApp()
const props = defineProps({
    lists: {
        type: Array,
        default: []
    },
    count: {
        type: Number,
        default: null
    },
    loading: {
        type: Boolean,
        default: false
    },
})
const getStyle = () => {
    const count = props.count || (props.lists.length >= 5 ? 5 : props.lists.length)
    return 'flex-basis:' + (100 / count) + '%'
}
const emit = defineEmits(['click'])
const gridOnclick = (value) => {
    emit('click', value)
}
</script>
  
<style scoped lang="scss">
.grid {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    overflow: hidden;
}

.grid-item {
    background-color: aliceblue;
    position: relative;
    box-sizing: border-box;
}

.grid-item_content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--nut-grid-item-content-padding, 16px 8px);
    background: var(--nut-grid-item-content-bg-color, var(--nut-white, #fff));
    border: 0 solid var(--nut-grid-border-color, #f5f6f7);
}

.avatar-small {
    width: var(--nut-avatar-small-width, 32px);
    height: var(--nut-avatar-small-height, 32px);
    line-height: var(--nut-avatar-small-height, 32px);
}

.grid-item_text {
    margin: var(--nut-grid-item-text-margin, 8px) 0 0 0;
    font-size: var(--nut-grid-item-text-font-size, var(--nut-font-size-1, 12px));
    line-height: 1.5;
    color: var(--nut-grid-item-text-color, var(--nut-title-color2, #666));
    word-break: break-all;
}
</style>